<template>
  <div>
    <div id="div">
      <div class="form">
        <p>Login</p>
        <div class="group">
          <input required="true" class="main-input" type="text" v-model="loginName">
          <span class="highlight-span"></span>
          <label class="lebal-email">LOGINNAME</label>
        </div>
        <div class="container-1">
          <div class="group">
            <input required="true" class="main-input" type="password" v-model="password">
            <span class="highlight-span"></span>
            <label class="lebal-email">PASSWORD</label>
          </div>
        </div>
        <button class="submit" @click="submit">submit</button>
      </div>
    </div>
    <!-- 加载 -->
    <svg :style="loadingStyle" class="pl" width="240" height="240" viewBox="0 0 240 240">
      <circle class="pl__ring pl__ring--a" cx="120" cy="120" r="105" fill="none" stroke="#000" stroke-width="20"
        stroke-dasharray="0 660" stroke-dashoffset="-330" stroke-linecap="round"></circle>
      <circle class="pl__ring pl__ring--b" cx="120" cy="120" r="35" fill="none" stroke="#000" stroke-width="20"
        stroke-dasharray="0 220" stroke-dashoffset="-110" stroke-linecap="round"></circle>
      <circle class="pl__ring pl__ring--c" cx="85" cy="120" r="70" fill="none" stroke="#000" stroke-width="20"
        stroke-dasharray="0 440" stroke-linecap="round"></circle>
      <circle class="pl__ring pl__ring--d" cx="155" cy="120" r="70" fill="none" stroke="#000" stroke-width="20"
        stroke-dasharray="0 440" stroke-linecap="round"></circle>
    </svg>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        loginName: '',
        password: '',
        loadingStyle: {
          display: 'none',
        },
        loginLog: {
          browser: '',//浏览器名称
          operating_system: '',//操作系统
        },
      }
    },
    methods: {
      async submit() {
        if (this.loginName == '') {
          this.$message({
            message: '请输入账户！！！',
            type: 'warning'
          });
          return;
        }
        if (this.password == '') {
          this.$message({
            message: '请输入账户密码！！！',
            type: 'warning'
          });
          return;
        }
        const userAgent = navigator.userAgent;
        if (userAgent.indexOf("Windows") != -1) {
          this.loginLog.operating_system = 'Windows';
        } else if (userAgent.indexOf("Mac") != -1) {
          this.loginLog.operating_system = "macOS";
        } else if (userAgent.indexOf("Linux") != -1) {
          this.loginLog.operating_system = "Linux";
        } else if (userAgent.indexOf("Android") != -1) {
          this.loginLog.operating_system = "Android"
        } else if (userAgent.indexOf("iOS") != -1) {
          this.loginLog.operating_system = "iOS";
        } else {
          this.loginLog.operating_system = 'Windows';
        }
        if (userAgent.indexOf("Chrome") != -1) {
          this.loginLog.browser = "Chrome";
        } else if (userAgent.indexOf("Firefox") != -1) {
          this.loginLog.browser = "Firefox";
        } else if (userAgent.indexOf("Edge") != -1) {
          this.loginLog.browser = "Edge"
        } else if (userAgent.indexOf("Safari") != -1) {
          this.loginLog.browser = "Safari";
        } else {
          this.loginLog.browser = "Edge"
        }
        var now = new Date();
        var timestamp = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate() + " " + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();
        this.loadingStyle.display = 'block';
        try {
          await fetch("/authority/user/doLogin/" + this.loginName + "/" + this.password + "/" + this.loginLog.browser + "/" + this.loginLog.operating_system + "/" + timestamp, {
            method: "POST"
          })
            .then(response => response.json())
            .then(data => {
              setTimeout(() => {
                this.loadingStyle.display = "none";
                if (data.code == 200) {
                  console.log(data.data);
                  // 登入成功
                  sessionStorage.setItem("satoken", JSON.stringify(data.data));
                  this.$router.push("/index/home");
                  return;
                }
                if (data.code == 500) {
                  this.$message.error(data.msg);
                  return;
                }

              }, 3000);
            })
        } catch (error) {

        }
      }
    }

  }
</script>

<style>
  html,
  body {
    padding: 0px 0px;
    margin: 0px 0px;
  }

  #div {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }

  .group {
    position: relative;
  }

  .form {
    width: 20%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    border: 1px solid white;
    padding: 120px 40px;
    padding-top: 60px;
    padding-bottom: 90px;
    padding-right: 40px;
    padding-left: 40px;
    background-color: black;
    border-radius: 20px;
    position: relative;
  }

  .form p {
    padding-bottom: 20px;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: .5px;
    color: white;
  }

  .container-1 {
    padding-top: 30px;
  }

  .main-input {
    font-size: 16px;
    padding: 10px 10px 10px 5px;
    display: block;
    width: 185px;
    border: none;
    border-bottom: 1px solid #6c6c6c;
    background: transparent;
    color: #ffffff;
  }

  .main-input:focus {
    outline: none;
    border-bottom-color: #42ff1c;
  }

  .lebal-email {
    color: #999999;
    font-size: 18px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 5px;
    top: 10px;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
  }

  .main-input:focus~.lebal-email,
  .main-input:valid~.lebal-email {
    top: -20px;
    font-size: 14px;
    color: #42ff1c;
  }

  .highlight-span {
    position: absolute;
    height: 60%;
    width: 0px;
    top: 25%;
    left: 0;
    pointer-events: none;
    opacity: 0.5;
  }

  .main-input:focus~.highlight-span {
    -webkit-animation: input-focus 0.3s ease;
    animation: input-focus 0.3s ease;
  }

  @keyframes input-focus {
    from {
      background: #42ff1c;
    }

    to {
      width: 185px;
    }
  }

  .submit {
    margin-top: 1.2rem;
    padding: 10px 20px;
    border-radius: 10px;
  }

  /* 加载 */
  .pl {
    width: 6em;
    height: 6em;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .pl__ring {
    animation: ringA 2s linear infinite;
  }

  .pl__ring--a {
    stroke: #f42f25;
  }

  .pl__ring--b {
    animation-name: ringB;
    stroke: #f49725;
  }

  .pl__ring--c {
    animation-name: ringC;
    stroke: #255ff4;
  }

  .pl__ring--d {
    animation-name: ringD;
    stroke: #f42582;
  }

  /* Animations */
  @keyframes ringA {

    from,
    4% {
      stroke-dasharray: 0 660;
      stroke-width: 20;
      stroke-dashoffset: -330;
    }

    12% {
      stroke-dasharray: 60 600;
      stroke-width: 30;
      stroke-dashoffset: -335;
    }

    32% {
      stroke-dasharray: 60 600;
      stroke-width: 30;
      stroke-dashoffset: -595;
    }

    40%,
    54% {
      stroke-dasharray: 0 660;
      stroke-width: 20;
      stroke-dashoffset: -660;
    }

    62% {
      stroke-dasharray: 60 600;
      stroke-width: 30;
      stroke-dashoffset: -665;
    }

    82% {
      stroke-dasharray: 60 600;
      stroke-width: 30;
      stroke-dashoffset: -925;
    }

    90%,
    to {
      stroke-dasharray: 0 660;
      stroke-width: 20;
      stroke-dashoffset: -990;
    }
  }

  @keyframes ringB {

    from,
    12% {
      stroke-dasharray: 0 220;
      stroke-width: 20;
      stroke-dashoffset: -110;
    }

    20% {
      stroke-dasharray: 20 200;
      stroke-width: 30;
      stroke-dashoffset: -115;
    }

    40% {
      stroke-dasharray: 20 200;
      stroke-width: 30;
      stroke-dashoffset: -195;
    }

    48%,
    62% {
      stroke-dasharray: 0 220;
      stroke-width: 20;
      stroke-dashoffset: -220;
    }

    70% {
      stroke-dasharray: 20 200;
      stroke-width: 30;
      stroke-dashoffset: -225;
    }

    90% {
      stroke-dasharray: 20 200;
      stroke-width: 30;
      stroke-dashoffset: -305;
    }

    98%,
    to {
      stroke-dasharray: 0 220;
      stroke-width: 20;
      stroke-dashoffset: -330;
    }
  }

  @keyframes ringC {
    from {
      stroke-dasharray: 0 440;
      stroke-width: 20;
      stroke-dashoffset: 0;
    }

    8% {
      stroke-dasharray: 40 400;
      stroke-width: 30;
      stroke-dashoffset: -5;
    }

    28% {
      stroke-dasharray: 40 400;
      stroke-width: 30;
      stroke-dashoffset: -175;
    }

    36%,
    58% {
      stroke-dasharray: 0 440;
      stroke-width: 20;
      stroke-dashoffset: -220;
    }

    66% {
      stroke-dasharray: 40 400;
      stroke-width: 30;
      stroke-dashoffset: -225;
    }

    86% {
      stroke-dasharray: 40 400;
      stroke-width: 30;
      stroke-dashoffset: -395;
    }

    94%,
    to {
      stroke-dasharray: 0 440;
      stroke-width: 20;
      stroke-dashoffset: -440;
    }
  }

  @keyframes ringD {

    from,
    8% {
      stroke-dasharray: 0 440;
      stroke-width: 20;
      stroke-dashoffset: 0;
    }

    16% {
      stroke-dasharray: 40 400;
      stroke-width: 30;
      stroke-dashoffset: -5;
    }

    36% {
      stroke-dasharray: 40 400;
      stroke-width: 30;
      stroke-dashoffset: -175;
    }

    44%,
    50% {
      stroke-dasharray: 0 440;
      stroke-width: 20;
      stroke-dashoffset: -220;
    }

    58% {
      stroke-dasharray: 40 400;
      stroke-width: 30;
      stroke-dashoffset: -225;
    }

    78% {
      stroke-dasharray: 40 400;
      stroke-width: 30;
      stroke-dashoffset: -395;
    }

    86%,
    to {
      stroke-dasharray: 0 440;
      stroke-width: 20;
      stroke-dashoffset: -440;
    }
  }
</style>